<template>
  <div>
    <template v-for="(sidebarItem, sidebarIndex) in $router.options.routes">
      <el-menu default-active="defaultActive" router class="el-menu-vertical-demo" :key="sidebarIndex" v-if="sidebarItem.menu" :collapse="collapse">
        <template v-for="(item, index) in sidebarItem.children">
          <!-- 当前有子节点 -->
          <el-submenu :index="item.path" :key="index" v-if="item.children && item.children.length">
            <template slot="title">
              <svg-icon v-bind:icon-class="item.icon"></svg-icon>
              <span slot="title"> {{ item.name }}</span>
            </template>
            <!-- 子菜单 -->
            <el-menu-item v-for="(child, childIndex) in item.children" :key="childIndex" :index="child.path">
              <!-- <svg-icon v-bind:icon-class="child.icon"></svg-icon> -->
              <span class="childTxt" slot="title"> {{ child.name }}</span>
            </el-menu-item>
          </el-submenu>
          <!-- 当前节点不含子节点且非隐藏 -->
          <el-menu-item :index="item.path" :key="index" v-if="!item.children">
            <svg-icon v-bind:icon-class="item.icon"></svg-icon>
            <span slot="title"> {{ item.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </template>
  </div>
</template>

<script>
  export default {
    name: 'Sidebar',
    components: {},
    props: {
      collapse: {
        type: Boolean
      }
    },
    data () {
      return {
        
      }
    },
    computed: {
      defaultActive () {
        return this.$route.path
      }
    }
  }
</script>

<style lang="scss" scoped>
  .childTxt{
    font-weight: normal;
    font-size: 12px;
  }
</style>
